<template>
    <div>
        <div class="index">
            <div class="w1">
                <span>消息设置</span>
            </div>
            <div class="w2">
                <div class="w2_1">有以下信息通知我</div>
                <div class="w2_2">
                    <span>回复我的</span>
                    <el-radio v-model="radio1" label="1">所有人</el-radio>
                    <el-radio v-model="radio1" label="2">仅关注</el-radio>
                    <el-radio v-model="radio1" label="3">不接受任何消息提醒</el-radio>
                </div>
                <div class="w2_3">
                    <span>主动@我</span>
                    <el-radio v-model="radio2" label="1">所有人</el-radio>
                    <el-radio v-model="radio2" label="2">仅关注</el-radio>
                    <el-radio v-model="radio2" label="3">不接受任何消息提醒</el-radio>
                </div>
                <div class="w2_4">
                    <span>给我点赞</span>
                    <el-radio v-model="radio3" label="1">所有人</el-radio>
                    <el-radio v-model="radio3" label="2">仅关注</el-radio>
                    <el-radio v-model="radio3" label="3">不接受任何消息提醒</el-radio>
                </div>
                <div class="w2_5">
                    <span>系统通知</span>
                    <el-radio v-model="radio4" label="1">开启</el-radio>
                    <el-radio v-model="radio4" label="2">关闭</el-radio>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio1: '1',radio2: '1',radio3: '1',radio4: '1'
        }
    }
}
</script>

<style lang="less" scoped>
    .index {
        .w1 {
            border-bottom: 1px solid #ccc;
            padding: 6px;
            span {
                font-size: 20px;
            }
        }
        .w2 {
            .w2_1 {
                padding: 10px;
                color: #ccc;
                font-size: 10px;
                margin-left: 10px;
            }
            .w2_2 {
                border-bottom: 1px solid #ccc;
                padding: 15px;
                margin-left: 20px;
                width: 90%;
                span {
                    margin-top: -10px;
                    margin-left: -12px;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 16px;
                }
                .el-radio {
                    margin-left: -12px;
                    margin-top: 15px;
                }
            }
            .w2_3 {
                border-bottom: 1px solid #ccc;
                padding: 15px;
                margin-left: 20px;
                margin-top: 20px;
                width: 90%;
                span {
                    margin-top: -10px;
                    margin-left: -12px;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 16px;
                }
                .el-radio {
                    margin-left: -12px;
                    margin-top: 15px;
                }
            }
            .w2_4 {
                border-bottom: 1px solid #ccc;
                padding: 15px;
                margin-left: 20px;
                margin-top: 20px;
                width: 90%;
                span {
                    margin-top: -10px;
                    margin-left: -12px;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 16px;
                }
                .el-radio {
                    margin-left: -12px;
                    margin-top: 15px;
                }
            }
            .w2_5 {
                border-bottom: 1px solid #ccc;
                padding: 15px;
                margin-left: 20px;
                margin-top: 20px;
                width: 90%;
                span {
                    margin-top: -10px;
                    margin-left: -12px;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 16px;
                }
                .el-radio {
                    margin-left: -12px;
                    margin-top: 15px;
                }
            }
        }
    }
</style>